<template>
    <view class="container">
        <view class="video-container">
            <div id="detail-player" class="video"></div>
        </view>
        <view class="line">
            <view class="domain" @click="checkoutLine(video_cdns.video_cdn1.domain, 'video_cdn1')">线路一</view>
            <view class="domain" @click="checkoutLine(video_cdns.video_cdn2.domain, 'video_cdn2')">线路二</view>
        </view>

        <view class="now-line">
            <text class='current_line' style='color: #555;'>当前【{{ video_cdns[now_line].text }}】</text>
            <text style='color: red;font-weight: bold;'>不能播放请切换线路</text>
        </view>

        <view>
            <u-grid :col="2" :border="false" v-if="videoList.length">
                <u-grid-item v-for="(video, index) in videoList"
                             :key="video.id"
                             :index="video.id"
                             :custom-style="{padding:'15rpx 0'}"
                >
                    <view class="video-item" @click="videoDetail(video)">
                        <view style="position: relative;">
                            <u-image width="100%" height="240rpx" :src="video.face_img"></u-image>
                            <text class="video-time video-text">时长: {{ video.time }}</text>
                            <text class="video-count video-text">{{ video.play_count }}人付费{{ video.price }}元观看</text>
                        </view>
                        <view>
                            <text class="video-name">{{ $help.xor_enc(video.c_title) }}</text>
                        </view>
                    </view>
                </u-grid-item>
            </u-grid>
            <u-empty v-else text="更多视频24小时不间断上传中..." mode="data"></u-empty>

            <view style="padding: 15px 0; text-align: center;">
                <u-button @click="backHome()"
                          size="medium"
                          class="free"
                >查看更多</u-button>
            </view>
        </view>

        <!--返回首页快捷方式-->
        <view class="home" @click="backHome()">
            🏠 回首页
        </view>

        <!--支付模态框-->
        <Pay ref="PayModal"></Pay>
    </view>
</template>

<script>

    import {BASE_COVER, BASE, BASE_VIDEO} from "../../env";
    import Pay from "@/components/pay.vue"

    import Hls from 'hls.js';
    import player from  'dplayer';


    export default {
        data() {
            return {
                poster: BASE + '/images/mobile/play.jpg',
                video_url: 'http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8',
                video_cdns:{
                    video_cdn1: {},
                    video_cdn2: {},
                },
                now_line: 'video_cdn1',
                video: {},
                signs: '',

                param: {
                    code: '',
                    pay_type: '',
                    price_type: '',
                    video_id: '',
                },
                player: {},
                videoList:[],
                storeData:{
                    code: '',
                    code0: '',
                    out_video: null,
                    pic_type: 'encode_img',
                    score: 1,
                    user_score: 0,
                },


            }
        },
        components: {Pay},
        onLoad(options) {

            if (options) this.param = options;

            // 获取播放信息
            this.getPayVideo();

            // 获取推荐信息
            this.getRecommendVideo();
        },


        methods: {
            // 获取视频详情
            getPayVideo() {
                this.$api.getPayVideo(this.param).then((res) => {
                    // nums  price  price_day signs user_day_text video  video_cdns
                    let {video, video_cdns, signs} = res;
                    let video_p = video.url.replace('index.m3u8', 'index.m3u8?sign=' + signs);

                    this.signs = signs;

                    this.video_url = 'http://' + video_cdns.video_cdn1.domain + '/' + video_p;

                    video_cdns.video_cdn1.text = '线路一';
                    video_cdns.video_cdn2.text = '线路二';
                    this.video_cdns = video_cdns;


                    this.video = video;

                    // 重新初始化播放器
                    this.initPlayer(this.video_url);
                    // console.log('当前视频地址为', this.video_url)

                    // console.log(res)
                })
            },

            // 加载播放器
            initPlayer(videoUrl = null) {
                this.player = new player({
                    container: document.getElementById('detail-player'),
                    autoplay: false,
                    theme: '#FADFA3',
                    loop: true,
                    lang: 'zh-cn',
                    screenshot: false, // 是否开启截图
                    hotkey: true, // 是否开启热键
                    volume: 0.7, // 默认音量
                    mutex: true, // 阻止多个播放器同时播放
                    video: {
                        url: videoUrl ? videoUrl : BASE_VIDEO,
                        type: 'customHls',
                        customType: {
                            customHls: function (video, player) {
                                const hls = new Hls();
                                hls.loadSource(video.src);
                                hls.attachMedia(video)
                            }
                        }
                    }
                })
            },

            // 切换线路
            checkoutLine(domain, key) {
                this.now_line = key;
                let video_p = this.video.url.replace('index.m3u8', 'index.m3u8?sign=' + this.signs);
                this.video_url = 'http://' + domain + '/' + video_p;
                // console.log(this.video_url);
                this.initPlayer(this.video_url); // 初始化播放器
            },

            // 获取推荐视频
            getRecommendVideo() {
                let data = {
                    code: this.param.code,
                    recommend: 1,
                    random_view: 1,
                    page: 1,
                    limit: 16,
                    pic_type: 'encode_img'
                };

                this.$api.getVideoList(data).then((res) => {
                    let {videos} = res;
                    this.videoList = videos;
                    delete res.videos;
                    for (let item in res) {
                        this.storeData[item] = res[item];
                    }
                    if (videos.length) this.imgDecode(videos);
                });
            },

            // 封面视频批量解密
            imgDecode(videoList) {
                let _this = this;
                let cdn = this.storeData.img_cdns;
                videoList.forEach(function (item, index) {
                    // 拼接加密地址
                    let cover = item.videos_num == 2 ? `http://${cdn.img_cdn2.domain}/${item.face_img}` :  `http://${cdn.img_cdn1.domain}/${item.face_img}`;
                    // 解密
                    _this.$help.imgDecode(cover, item.id).then((res) => {
                        let item = _this.videoList.find(item => item.id === res.id);
                        item.face_img = res.src;
                    });
                });
            },

            // 点击视频查看详情
            videoDetail(video) {
                // 传递数据给模态框
                this.$refs.PayModal.videoItem(0, video);
            },

            // 查看更多
            backHome() {
                this.$u.route({
                    url: 'pages/index/index'
                })
            }

        }
    }
</script>

<style lang="scss" scoped>
    .video {
        width: 100%;
        /*height: 360rpx;*/
    }
    .line {
        display: flex;
        justify-content: space-around;
        margin-top: 10rpx;
    }
    .line .domain{
        background: black;
        color: white;
        width: 35%;
        text-align: center;
        font-size: 36rpx;
        font-weight: 600;
        height: 60rpx;
        line-height: 60rpx;
        border-radius: 14rpx;
    }
    .now-line {
        text-align: center;
        margin-top: 40rpx;
        background: #ccc;
        height: 80rpx;
        line-height: 80rpx;
    }

    .video-item {
        padding: 0 10rpx;
        width: 100%;
        .video-cover {
            width: 100%;
            height: 240rpx;
        }
        .video-time{
            position: absolute;
            left: 10rpx;
            top: 5rpx;
        }
        .video-count{
            position: absolute;
            bottom: 10rpx;
            left: 10rpx;
        }
        .video-text {
            color: white;
            font-weight: 500;
            font-size: 20rpx;
        }
        .video-name {
            display: block;
            border: 1px solid #cccc;
            border-radius: 8rpx;
            margin-top: -6rpx;
            height: 48rpx;
            line-height: 48rpx;
            text-indent: 1em;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
            color: black;
        }
    }

    .free {
        background: linear-gradient(to right, Yellow, red);
        font-size: 20px;
        font-weight: bold;
        width: 60%;
    }

    .home{
        position: fixed;
        z-index: 20;
        bottom: 70px;
        background: rgba(1,9,9,0.7);
        border-top-left-radius:15px;
        border-bottom-left-radius:15px;
        padding:5px 10px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        right: 0px;
        font-weight: bold;
    }
</style>